<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>

<nav th:replace="~{/commons/publicElement::topBar}">
    <!--
                th:insert ：将公共片段整个的插入到指定元素中。被引用的内容会完全在这里显示（nav标签里面还会再嵌套一个nav标签）
                th:replace：将声明引入的元素（本nav标签）替换为公共片段
                th:include：将被引入的片段的内容包含进这个标签中
    -->
</nav>
<div class="container-fluid">
    <div class="row">
<!--		还可以通过css选择器来引用
				<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="leftNav" th:fragment="leftBar">
				还可以在调用的时候传递参数进去
                在目标thymeleaf，必须通过${}表达式才能取到该值
-->
        <div th:replace="~{/commons/publicElement::#leftNav(activeUri='list.html')}"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" id="app">
            <h2>Section title</h2>
            <h3><button class="btn btn-sm btn-success" @click="addItem()">商品添加</button></h3>
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>title</th>
                        <th>image</th>
                        <th>price</th>
						<th>created</th>
						<th>operation</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="item : ${itemList}" th:height="100">
                        <td th:text="${item.id}">1,001</td>
                        <td th:text="${item.title}">Lorem</td>
                        <td><img th:src="${item.image}" alt="" width="100"></td>
                        <td th:text="${item.price}"></td>
                        <td th:text="${#dates.format(item.created,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
<!--

                thymeleaf 中的字符串拼接
-->
                            <a class="btn btn-sm btn-primary" th:href="@{/item/}+${item.id}">操作</a>
<!--
            th:attr="自定义属性=el表达式" 可以动态的给标签写入属性
-->
                            <button type="submit" class="btn btn-sm btn-danger"
                                th:attr="delete_uri=@{/item/}+${item.id}" @click="deleteThisItem">

                                删除
                            </button>

                            <!--
                            这样删除太笨重了
                            <form th:action="@{/item}" method="post">
                                <input type="hidden" name="_method" value="delete">
                                <input type="hidden" name="itemId" th:value="${item.id}">
                                <button type="submit" class="btn btn-sm btn-danger">删除</button>
                            </form>-->
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </main>
        <form action="" method="post" id="deleteItemForm">
            <input type="hidden" name="_method" value="delete">

        </form>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>

<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>

<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
<script type="text/javascript" src="asserts/js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        methods:{
            addItem:function(){
                window.location.href= [(@{"/crud/panels"})];
            },
            deleteThisItem:function(event){
                // 获取触发这个方法的元素 <button>
                let target = event.target;

                //获取button中的自定义属性
                var deleteUri = $(target).attr("delete_uri");

                //获取form表单元素
                var deleteItemForm = $("#deleteItemForm");

                //重新设置form表单提交的位置
                deleteItemForm.prop("action",deleteUri);

                console.log(deleteUri);

                //提交表单
                deleteItemForm.submit();
            }
        }
    })
</script>
<h1>[(@{"/panels"})]</h1>
</body>

</html>